<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh">

	<head>
		<meta charset="utf-8" />
		<title>有奖征文</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/editormd.css" />
		<link rel="stylesheet" href="css/styleinput.css" media="screen" type="text/css" />
	</head>
	<style type="text/css">
		button {
			width: 200px;
			padding: 8px;
			background-color: #428bca;
			border-color: #357ebd;
			color: #fff;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			/* future proofing */
			-khtml-border-radius: 10px;
			/* for old Konqueror browsers */
			text-align: center;
			vertical-align: middle;
			border: 1px solid transparent;
			font-weight: 900;
			font-size: 125%
		}
	</style>

	<body>

		<h1>文章标题</h1>

		<br>
		<div class="wrap">
			<input id="blog_title" type="text" placeholder="点击输入标题" />
		</div>
		<div style="text-align: right;">
			<form id="uploadForm" enctype="multipart/form-data" method="post">
				上传文章标题图片：<input type="file" name="file">
			</form>
			<button id="submit">
		    	提交
		   </button>
		</div>
		<header>
			<h1 style="color:#87CEEB">征文内容</h1>
		</header>
		<div id="test-editormd">
			<textarea id="blog_html" name="html" value="" style="display: none;"></textarea>
		</div>


		<script src="js/jquery.min.js"></script>
		<script src="js/editormd.min.js"></script>

		<script type="text/javascript">
			$("#submit").submit(function(e) {
				alert("Submitted");
			});
		</script>

		<!--######################### MarkDown 配置###########################-->
		<script type="text/javascript">
			var imgurl = "";
			var testEditor;
			$(function() {
				testEditor = editormd("test-editormd", {
					placeholder: "亲，请输入您的内容",
					width: "90%",
					height: 640,
					syncScrolling: "single",
					path: "/lib/",
					emoji: true,
					saveHTMLToTextarea: true,
					imageUpload: true,
					imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
					imageUploadURL: "/imgUpload", //文件提交请求路径
					toolbarIcons: function() {
						return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "watch", "clear", "search"]
					},
				});

				testEditor.getHTML();
			});
		</script>
		<!--######################### MarkDown ###########################-->
		<script type="text/javascript">
			$('#submit').click(function() {
				var formData = new FormData($('#uploadForm')[0]);
				var imageTitleUrl;
				$.ajax({
					type : 'POST',
					url : 'uploadTitleImage',
					data : formData,
					cache : false,
					processData : false,
					contentType : false,
					async:false,
	 				success: function(data) {
						console.log(data);
						imageTitleUrl=data;
					}
				});
				
			
			
				obj = document.getElementsByTagName("span");
				class_name = "cm-string";
				for(i in obj) {
					if(obj[i].className == class_name) {
						imgurl += obj[i].innerHTML + ",";
					}
				}
				imgurl = imgurl.substr(1, imgurl.length - 3);
				var title = $("#blog_title").val();
				var detail = testEditor.getHTML();
				var users = JSON.stringify({
					"atitle": title,
					"detail": detail,
					"aimage": imageTitleUrl
				});
				$.ajax({
					type: "post",
					url: "/addArticle",
					dataType: "json",
					contentType: 'application/json;charset=utf-8',
					data: users,
					success: function(data) {
						if(data.status=="success"){
							alert("提交成功!请等待管理员审核");
							window.location.href="/news";
						}else if(data.status=="tologin"){
							alert("您还未登录，请登录后发表");
							window.location.href="/user/login";
						}
					}
				});
			});
		</script>

	</body>

</html>